
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>个人中心</title>
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/css.css" />
		<link rel="stylesheet" type="text/css" href="css/details&personnal.css" />
		<link rel="stylesheet" type="text/css" href="css/browse.css" />
		<link rel="shortcut icon" href="favicon.ico" />
		<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.superslide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
					<a class="navbar-brand" href="#"><img src="img/book.png" alt=""></a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
		
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav mr-auto bt">
							
							<li>图书商城管理系统</li>
						</ul>
		
						<ul class="navbar-nav navbar-light">
							<li class="nav-item"><button class="btn btn-info" type="button" style="margin-left: 5px" data-toggle="modal" ><a href="personnal.html">个人中心</a></button>
							</li>
							<li class="nav-item">
								<button class="btn btn-info" type="button" style="margin-left: 5px" data-toggle="modal" data-target="#login">登录</button>
							</li>
		
							<li class="nav-item">
								<button class="btn btn-success" type="button" style="margin-left: 5px" data-toggle="modal" data-target="#register">注册</button>
							</li>
						</ul>
		
					</div>
				</nav>
				
		<header class="userList">
			
		</header>
		
		<nav>
			<div class="innerBox">
				<ul id="nav-ul">
					<li class="active"><a href="index.html">首页</a></li>
					<li><a href="cates.html">名人励志</a></li>
					<li><a href="dianqi.html">经典名著</a></li>
					<li><a href="wenju.html">儿童绘本</a></li>
					
					
					<li><a href="valuation.html">估价咨询</a></li>
					</li>
				</ul>
			</div>
		</nav>
		<div class="container">
			<div class="innerBox">
				<div class="personnalHead">个人中心</div>
	<div class="row" >
	  <div class="col-4" style="margin-top:30px">
	    <div class="list-group" id="list-tab" role="tablist">
	      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">用户信息</a>
		  <a class="list-group-item list-group-item-action" id="list-commodity-list" data-toggle="list" href="#list-commodity" role="tab" aria-controls="home">商品管理</a>
	      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">我的购物车</a>
	      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">我的订单详情</a>
	      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">我的足迹</a>
	    </div>
	  </div>
	  <div class="col-8">
	    <div class="tab-content" id="nav-tabContent">
	
	<!--个人信息开始-->
	      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
				<table class="table table-striped" style="margin-top:30px">
					<thead>
					<tr>
					  <th scope="col">头像</th>
					  <th scope="col"><img src="img/头像.png" alt="" style="width:40px;height:40px"></th>
					</tr>
					</thead>
					<tbody>
					<tr>
					  <th scope="row">用户名</th>
					  <td>落枫</td>
					</tr>
					<tr>
					  <th scope="row">年龄</th>
					  <td>20</td>
					</tr>
					<tr>
					  <th scope="row">性别</th>
					  <td>男</td>
					</tr>
					<tr>
					  <th scope="row">电话号码</th>
					  <td>123456789</td>
					</tr>
					<tr>
					  <th scope="row">收货地址</th>
					  <td>四川省宜宾市翠屏区四川轻化工大学</td>
					</tr>
					</tbody>
				</table>
			  <button type="submit" class="btn btn-success" data-toggle="modal" data-target="#modify_info">修改个人信息</button>
		  </div>
	<!--个人信息结束-->
	
	<!--商品管理开始-->
	<div class="tab-pane fade" id="list-commodity" role="tabpanel" aria-labelledby="list-commodity-list">
					<div class="" style="margin-top:30px">
					<ul class="list-group">
	  					<li class="list-group-item active" aria-current="true">我的购物车</li>
					</ul>
					<table class="table">
					  	<thead class="thead-light">
							<tr>
								<th scope="col">操作</th>
						  		<th scope="col">商品</th>
								<th scope="col">价格</th>
								<th scope="col">数量</th>
								<th scope="col">总价</th>
							</tr>
					  	</thead>
					  	<tbody>
							<tr>
								<th scope="row">
							  		<div class="form-group form-check m-auto">
										<input type="checkbox" class="form-check-input" id="exampleCheck1">
									</div>
						  		</th>
						  		<th scope="row">
							  		<img src="img/人间值得.jpg" class="figure-img img-fluid rounded" alt="..." width="50" height="50">
						  		</th>
								<td>¥4999.00</td>
								<td>
									<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
										<div class="btn-group mr-2" role="group" aria-label="First group">
											<button type="button" class="btn btn-info">-</button>
											<button type="button" class="btn">1</button>
											<button type="button" class="btn btn-info">+</button>
										</div>
									</div>
								</td>
								<td>¥4999.00</td>
							</tr>
							<tr>
								<th scope="row">
							  		<div class="form-group form-check">
										<input type="checkbox" class="form-check-input" id="exampleCheck1">
									</div>
						  		</th>
						  		<th scope="row">
							  		<img src="img/人间值得.jpg" class="figure-img img-fluid rounded" alt="..." width="50" height="50">
						  		</th>
								<td>¥4999.00</td>
								<td>
									<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
										<div class="btn-group mr-2" role="group" aria-label="First group">
											<button type="button" class="btn btn-info">-</button>
											<button type="button" class="btn">1</button>
											<button type="button" class="btn btn-info">+</button>
										</div>
									</div>
								</td>
								<td>¥4999.00</td>
							</tr>
					  	</tbody>
					</table>
	
					<div class="" style="float:left;color:red;font-size:15px;margin-top:10px">
						<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#add_goods">添加商品</button>
					</div>
		  </div>
		  </div>
	
	<!--商品管理结束-->
	
	
	<!--我的购物车开始-->
	      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
					<div class="" style="margin-top:30px">
					<ul class="list-group">
	  					<li class="list-group-item active" aria-current="true">我的购物车</li>
					</ul>
					<table class="table">
					  	<thead class="thead-light">
							<tr>
								<th scope="col">操作</th>
						  		<th scope="col">商品</th>
								<th scope="col">价格</th>
								<th scope="col">数量</th>
								<th scope="col">总价</th>
							</tr>
					  	</thead>
					  	<tbody>
							<tr>
								<th scope="row">
							  		<div class="form-group form-check m-auto">
										<input type="checkbox" class="form-check-input" id="exampleCheck1">
									</div>
						  		</th>
						  		<th scope="row">
							  		<img src="img/人间值得.jpg" class="figure-img img-fluid rounded" alt="..." width="50" height="50">
						  		</th>
								<td>¥4999.00</td>
								<td>
									<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
										<div class="btn-group mr-2" role="group" aria-label="First group">
											<button type="button" class="btn btn-info">-</button>
											<button type="button" class="btn">1</button>
											<button type="button" class="btn btn-info">+</button>
										</div>
									</div>
								</td>
								<td>¥4999.00</td>
							</tr>
							<tr>
								<th scope="row">
							  		<div class="form-group form-check">
										<input type="checkbox" class="form-check-input" id="exampleCheck1">
									</div>
						  		</th>
						  		<th scope="row">
							  		<img src="img/人间值得.jpg" class="figure-img img-fluid rounded" alt="..." width="50" height="50">
						  		</th>
								<td>¥4999.00</td>
								<td>
									<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
										<div class="btn-group mr-2" role="group" aria-label="First group">
											<button type="button" class="btn btn-info">-</button>
											<button type="button" class="btn">1</button>
											<button type="button" class="btn btn-info">+</button>
										</div>
									</div>
								</td>
								<td>¥4999.00</td>
							</tr>
					  	</tbody>
					</table>
	
					<div class="" style="float:right;color:red;font-size:15px;margin-top:10px">
						<p>商品数量：1<span id=money2></span></p>
						<p>商品金额：4999.00<span id=money1></span></p>
						<button type="submit" class="btn btn-success">提交订单</button>
					</div>
	
		  </div>
		  </div>
	<!--我的购物车结束-->
	
	<!--订单详情开始-->
	<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
		<ul class="list-group" style="margin-top:30px">
			<li class="list-group-item active" aria-current="true">我的订单</li>
		</ul>
	
		<table class="table">
			<thead class="thead-light">
				<tr>
					<th scope="col">序号</th>
					<th scope="col">订单编号</th>
					<th scope="col">下单时间</th>
					<th scope="col">总价</th>
					<th scope="col">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">
						1
					</th>
					<th scope="row">
						2022030700120001
					</th>
					<td>
						2022-03-07 12:00:01
					</td>
					<td>¥4999.00</td>
					<td>
						<button type="submit" class="btn btn-success btn-sm">查看详情</button>
					</td>
				</tr>
				<tr>
					<th scope="row">
						1
					</th>
					<th scope="row">
						2022030700120001
					</th>
					<td>
						2022-03-07 12:00:01
					</td>
					<td>¥4999.00</td>
					<td>
						<button type="submit" class="btn btn-success btn-sm">查看详情</button>
					</td>
				</tr>
				<tr>
					<th scope="row">
						1
					</th>
					<th scope="row">
						2022030700120001
					</th>
					<td>
						2022-03-07 12:00:01
					</td>
					<td>¥4999.00</td>
					<td>
						<button type="submit" class="btn btn-success btn-sm">查看详情</button>
					</td>
				</tr>
	
			</tbody>
		</table>
	
	</div>
	
	
	<!--订单详情结束-->
	
	<!--我的足迹开始-->
	<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
	<div class="" style="margin-top:30px">
					<ul class="list-group">
	  					<li class="list-group-item active" aria-current="true">最近浏览</li>
					</ul>
					<table class="table">
					  	<thead class="thead-light">
							<tr>
						  		<th scope="col">商品</th>
								<th scope="col">商品名称</th>
								<th scope="col">价格</th>
								<th scope="col">操作</th>
							</tr>
					  	</thead>
					  	<tbody>
							<tr>
						  		<th scope="row">
							  		<img src="img/人间值得.jpg" class="figure-img img-fluid rounded" alt="..." width="50" height="50">
						  		</th>
								<td>《人间值得》</td>
								<td>¥4999.00</td>
								<td>
									<button type="submit" class="btn btn-danger btn-sm"><img src="img/cart.png" style="width: 20px;height: 20px;">加入购物车</button>
								</td>
							</tr>
	
						  		<th scope="row">
							  		<img src="img/人间值得.jpg" class="figure-img img-fluid rounded" alt="..." width="50" height="50">
						  		</th>
								<td>《人间值得》</td>
								<td>¥4999.00</td>
								<td>
									<button type="submit" class="btn btn-danger btn-sm"><img src="img/cart.png" style="width: 20px;height: 20px;">加入购物车</button>
								</td>
					  	</tbody>
					</table>
	
	</div>
	</div>
	<!--我的足迹结束-->
	    </div>
	  </div>
	</div>
	
	
	<!--尾部开始-->
	<div class="row div_row_yxy" style="background:#d6d8d9;padding-top: 40px;padding-bottom: 40px;">
			<div class="col-12 text-center">
				<h3 class="display-8" style="color:red">图书商城管理系统</h3>
				<div class="a" style="color: #6c757d;">
				<span>关于我们</span><span class="copyright_split">|</span>
				<span>联系我们</span><span class="copyright_split">|</span>
				<span>联系客服</span><span class="copyright_split">|</span>
				<span>合作招商</span><span class="copyright_split">|</span>
				<span>商家帮助</span><span class="copyright_split">|</span>
				<span>营销中心</span>
				<p class="" style="margin-top: 15px">前置审批备案号: 川教GX-20120046</p>
				<p class="">Copyright © 2022 yxy All rights reserved</p>
				</div>
			</div>
	</div>
	<!--尾部结束-->
	
		</div>
	</body>
	
	<!--商品管理弹窗开始-->
			<div class="modal fade" id="add_goods" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 1500px">
	            <div class="modal-content">
	                <div class="modal-header">
	                    <h5 class="modal-title">添加商品</h5>
	                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                        <span aria-hidden="true">&times;</span>
	                    </button>
	                </div>
	                <div class="modal-body">
	                    <form action="/goods/add_goods" method="post" enctype="multipart/form-data">
	<!--                        {% csrf_token %}-->
	                        <div class="form-group row">
	                            <label for="inputPassword" class="col-sm-2 col-form-label">商品名称</label>
	                            <div class="col-sm-10">
	                              <input type="text" class="form-control" id="inputusername" name="goods_name">
	                            </div>
	                        </div>
	
	                        <div class="form-group row">
	                            <label for="inputPassword" class="col-sm-2 col-form-label">商品简介</label>
	                            <div class="col-sm-10">
	                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="goods_introduce"></textarea>
	                            </div>
	                        </div>
	
	                        <div class="form-group row">
	                            <label for="inputPassword" class="col-sm-2 col-form-label">商品缩略图</label>
	                            <div class="col-sm-10">
	                                <input type="file" name="photo" />
	                            </div>
	                        </div>
	
	                        <div class="form-group row">
	                            <label for="inputPassword" class="col-sm-2 col-form-label">商品所属分类</label>
	                            <div class="col-sm-10">
	                                <select  class="form-control" id="exampleFormControlSelect1" name="classify_id">
	<!--                                    {% for data in classify %}-->
	<!--                                        {{ data.id }}-{{ data.cname }}-->
	<!--                                        <option value ="{{ data.id }}">{{ data.cname }}</option>-->
	<!--                                    {% endfor %}-->
	                                </select>
	                            </div>
	                        </div>
	
	                        <div class="form-group row">
	                            <label for="inputPassword" class="col-sm-2 col-form-label">商品价格</label>
	                            <div class="col-sm-10">
	                                <input type="text" class="form-control" id="inputusername" name="goods_price">
	                            </div>
	                        </div>
	
	                        <div class="form-group row">
	                            <label for="inputPassword" class="col-sm-2 col-form-label">商品库存</label>
	                            <div class="col-sm-10">
	                                <input type="text" class="form-control" id="inputusername" name="goods_stock">
	                            </div>
	                        </div>
	
	<!--                        <div class="form-group row">-->
	<!--                            <label for="inputPassword" class="col-sm-2 col-form-label">商品介绍</label>-->
	<!--                            <div class="col-sm-10">-->
	<!--                                <textarea id="editor" name="content"></textarea>-->
	<!--                            </div>-->
	<!--                        </div>-->
	
	                        <div class="modal-footer">
	                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	                            <button type="submit" class="btn btn-primary">提交</button>
	                        </div>
	                    </form>
	                </div>
	
	            </div>
	        </div>
	    </div>
				<div class="personnalFoot"> </div>
			</div>
		</div>
		<div class="modal fade" id="register" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  	<div class="modal-dialog modal-lg">
		    	<div class="modal-content">
				  	<div class="modal-header">
						<h5 class="modal-title">用户注册</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						  	<span aria-hidden="true">&times;</span>
						</button>
				  	</div>
				  	<div class="modal-body">
						<form>
						  	<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">用户名</label>
								<div class="col-sm-10">
								  <input type="text" class="form-control" id="inputusername">
								</div>
						  	</div>
						  	<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">密码</label>
								<div class="col-sm-10">
								  <input type="password" class="form-control" id="inputPassword">
								</div>
						  	</div>
							<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">确认密码</label>
								<div class="col-sm-10">
								  <input type="password" class="form-control" id="inputConfirmPassword">
								</div>
						  	</div>
							<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">年龄</label>
								<div class="col-sm-10">
								  <input type="text" class="form-control" id="inputAge">
								</div>
						  	</div>
							<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">性别</label>
								<div class="col-sm-10">
								  <input type="text" class="form-control" id="inputSex">
								</div>
						  	</div>
		
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary">提交</button>
							</div>
						</form>
				  	</div>
		
		    	</div>
		  	</div>
		</div>
		<!--注册结束-->
		
		<!--登录开始-->
		<div class="modal fade" id="login" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  	<div class="modal-dialog modal-lg">
		    	<div class="modal-content">
				  	<div class="modal-header">
						<h5 class="modal-title" >用户登录</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						  	<span aria-hidden="true">&times;</span>
						</button>
				  	</div>
				  	<div class="modal-body">
						<form>
						  	<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">用户名</label>
								<div class="col-sm-10">
								  <input type="text" class="form-control" id="inputusername_1">
								</div>
						  	</div>
						  	<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">密码</label>
								<div class="col-sm-10">
								  <input type="password" class="form-control" id="inputPassword_2">
								</div>
						  	</div>
		
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary">提交</button>
							</div>
						</form>
				  	</div>
		
		    	</div>
		  	</div>
		</div>
		<div class="modal fade" id="modify_info" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  	<div class="modal-dialog modal-lg">
		    	<div class="modal-content">
				  	<div class="modal-header">
						<h5 class="modal-title">修改用户信息</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						  	<span aria-hidden="true">&times;</span>
						</button>
				  	</div>
				  	<div class="modal-body">
						<form>
						  	<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">用户名</label>
								<div class="col-sm-10">
								  <input type="text" class="form-control" id="inputusername">
								</div>
						  	</div>
						  	<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">密码</label>
								<div class="col-sm-10">
								  <input type="password" class="form-control" id="inputPassword">
								</div>
						  	</div>
							<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">确认密码</label>
								<div class="col-sm-10">
								  <input type="password" class="form-control" id="inputConfirmPassword">
								</div>
						  	</div>
							<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">年龄</label>
								<div class="col-sm-10">
								  <input type="text" class="form-control" id="inputAge">
								</div>
						  	</div>
							<div class="form-group row">
								<label for="inputPassword" class="col-sm-2 col-form-label">性别</label>
								<div class="col-sm-10">
								  <input type="text" class="form-control" id="inputSex">
								</div>
						  	</div>
		
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary">提交</button>
							</div>
						</form>
				  	</div>
		    	</div>
		  	</div>
		</div>
		
		<script type="text/javascript">
			$(function() {
				$("#waitSend").hide();
				$(".btn-danger").click(function() {
					alert("购买成功");
					$("#waitPay").hide();
					$("#waitSend").show();
				});
			});
		</script>
		
		
	</body>

</html>